<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                >
    <ui:define name="body">
        <div class="main-container" >
            <p:tabMenu id="tab1" model="#{dynamicMenu.getSimpleMenuModel(1)}" style="width: 90%"  />
            <h:form  id="form" style="width: 90%">
                <p:panel style="border-bottom: none; width: 90%" >  
                    <p:fieldset  style="margin: 0px; height: 40px" >  
                        <h:panelGrid columns="5"  style="border-bottom-width: 0px; border-spacing: 0px; margin-top: 10px ">  

                            <h:outputText value="Order No :" />  
                            <h:outputText value="OR00#{orderBean.detOrderBean.noOrder}" style="margin-right: 400px" />
                            <h:outputText value="Date :" />  
                            <h:outputText value="#{orderBean.detOrderBean.dateOrder}" >
                                <f:convertDateTime pattern="MM/dd/yyyy"></f:convertDateTime>
                            </h:outputText>

                        </h:panelGrid>  

                    </p:fieldset>  
                </p:panel>
                <p:dataTable id="dataTable" var="detOrder" value="#{detOrderBean.getDetOrders()}" widgetVar="detOrderTable" 
                             paginator="true"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks}
                             {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" paginatorPosition="bottom" editable="true" editMode="cell"
                             rows="10" rowsPerPageTemplate="10,20,40"  style="width: 90%"
                             >  

                    <p:column  >  
                        <f:facet name="header">  
                            GI SKU 
                        </f:facet>  

                        <h:outputText value="#{detOrder.sku}" />  

                    </p:column>  
                    <p:column headerText="Model Name">  
                        <h:outputText value="#{detOrder.idCatalog.modelName}" style="float: left" />  
                    </p:column> 

                    <p:column headerText="Model Year">  
                        <h:outputText value="#{detOrder.idCatalog.modelYear}" />  
                    </p:column> 

                    <p:column headerText="Size" >  
                        <h:outputText value="#{detOrder.idSize.description}" />  
                    </p:column>  

                    <p:column headerText="Color" >  
                        <h:outputText value="#{inventory.colorDesc}" />  
                    </p:column>

                    <p:column headerText="Price Unit ($)" style="text-align: center">  
                        <h:outputText value="#{detOrder.priceUnit}" style="text-align: center" >  
                            <f:convertNumber type="currency"  currencySymbol="" pattern="###,###"/>
                        </h:outputText>
                    </p:column> 
                    <p:column headerText="Quantity" >  
                        <h:outputText value="#{detOrder.quantity}" />  

                    </p:column>  
                    <p:column headerText="Total (TL)" style="text-align: center"> 

                        <h:outputText value="#{detOrder.quantity*detOrder.priceUnit}" style="text-align: center" > 
                            <f:convertNumber type="currency"  currencySymbol="" pattern="###,###"/>
                        </h:outputText>

                    </p:column> 

                    <f:facet name="footer" >
                        <p:column colspan="0" style="text-align:left">  
                            Total Items: 
                        </p:column>
                        <p:column>  
                            <h:outputText value="#{detOrderBean.detOrders.size()}" style="text-align: left" >
                            </h:outputText>

                        </p:column> 
                        <p:column colspan="6" style="text-align:right">  
                            Total Order: 
                        </p:column>
                        <p:column>  
                            <h:outputText value="#{detOrderBean.totalDetails()}" style="text-align: right" >  
                                <f:convertNumber type="currency"  currencySymbol="" pattern="###,###"/>
                            </h:outputText>

                        </p:column> 

                    </f:facet>


                </p:dataTable> 

                <p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">  
                    <p:graphicImage value="http://localhost:8080/GiantExample-war/resources/img/icons/ajax-loading-bar.gif" />  
                </p:dialog> 

                <p:panel style="width: 90%">

                    <h:panelGrid columns="3"  >

                        <p:commandButton value="Edit" icon="edit" action="#{orderBean.editButton()}" ajax="false"/>

                        <p:commandButton value="Cancel" icon="cancel2"  oncomplete="dialogWidget.show()" ></p:commandButton>                     
                        <p:commandButton  value="Confirm" icon="confirm" action="inventory" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);"> 
                            <p:fileDownload value="#{orderBean.closeOrder()}"/>  
                        </p:commandButton>



                    </h:panelGrid>
                    <p:dialog widgetVar="dialogWidget" header="Confirm" >
                        <h:panelGrid id="confirmation" columns="1" columnClasses="column" cellpadding="10" > 
                            <h:outputText value="Are you sure?" />

                            <h:panelGrid id="columnas2" columns="2" columnClasses="column" cellpadding="10"> 
                                <p:commandButton  value="Yes" icon="confirm" action="#{orderBean.cancelOrder()}" ajax="false" process="@this,productsPanel"> </p:commandButton> 
                                <p:commandButton  value="No" icon="cancel2"  oncomplete="dialogWidget.hide()" > </p:commandButton> 
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:dialog>
                </p:panel>
            </h:form>

            <script type="text/javascript">
                            function start() {
                                statusDialog.show();
                            }

                            function stop() {
                                statusDialog.hide();
                                window.location = '#{request.contextPath}/user/OrInventory.xhtml';
                            }
            </script>  
        </div>
    </ui:define>
</ui:composition>

